<template>
	<div>
		<div class="ele-body">
			<a-card :bordered="false" title="首饰核对">
				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="6" :sm="24" :xs="24">
							<div class="hd_left">
								<div class="hd_title">批量录入条码（每行一个）：</div>
								<div class="hd_inp"><a-textarea class="hd_inp_con" placeholder="请输入" v-model:value="val" allow-clear @change="change" /></div>
							</div>
							<a-space>
								<a-button type="primary" class="ele-btn-icon"><span @click="save()">保存</span></a-button>
								<a-button type="dashed" class="ele-btn-icon"><span>取消</span></a-button>
							</a-space>
						</a-col>
						<a-col :md="18" :sm="24" :xs="24">
							<div class="hd_left hd_right">
								<div class="hd_title">检查结果</div>
								<div class="hd_inp">
									<a-row :gutter="24">
										<a-col :md="9" :sm="24" :xs="24">
											<div class="margin-y-10">有库存：({{ have.length }})</div>
											<a-table bordered size="small" :dataSource="have" :columns="columns" />
											<a-space class="margin-top-15">
												<a-button class="ele-btn-icon"><span>导出</span></a-button>
											</a-space>
										</a-col>
										<a-col :md="9" :sm="24" :xs="24">
											<div class="margin-y-10">无库存：({{ no.length }})</div>
											<a-table bordered size="small" :dataSource="no" :columns="columns" />
										</a-col>
										<a-col :md="6" :sm="24" :xs="24">
											<div class="margin-y-10">无效条码：({{ invalid.length }})</div>
											<div>
												<div class="margin-y-10 ele-text-danger" v-for="(item, index) in invalid" :key="index">{{ item }}</div>
											</div>
										</a-col>
									</a-row>
								</div>
							</div>
						</a-col>
					</a-row>
				</a-form>
			</a-card>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { goods_collate } from '@/api/jewelry/goods_collate';

// 是否显示编辑弹窗
const showEdit = ref(false);
const val = ref(null);
const bar_code = ref([]);
const have = ref([]);
const no = ref([]);
const invalid = ref([]);

const columns = ref([
	{
		title: '条形码',
		dataIndex: 'bar_code',
		key: 'bar_code'
	},
	{
		title: '库存',
		dataIndex: 'num',
		key: 'num'
	},
	{
		title: '所属位置',
		dataIndex: 'location',
		key: 'location'
	}
]);

const change = e => {
	//console.log(e.target.value);
	bar_code.value = e.target.value.split(/[(\r\n)\r\n]+/);
	bar_code.value.forEach((item, index) => {
		if (!item) {
			bar_code.value.splice(index, 1);
		}
	});
};
const save = () => {
	goods_collate({ bar_code: bar_code.value }).then(res => {
		have.value = res.data.have;
		no.value = res.data.no;
		invalid.value = res.data.invalid;
	}).catch(e => {
		message.error(e);
	});
};
</script>
